<script>
export default {
  name: "tableHeader",
  props: {
    column: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },

  render() {
    const column = JSON.parse(JSON.stringify(this.column));
    return this.renderTableHeader(column);
  },

  methods: {
    renderTableHeader(column) {
      column.align = column.align || "center";
      column.resizable = column.resizable || false;
      column.showOverflowTooltip = true;
      const scopedSlotsList = Object.keys(this.$scopedSlots);
      return scopedSlotsList.includes(column.prop) ||
        scopedSlotsList.includes(column.prop + "-head") ? (
        this.renderCustomOption(column)
      ) : (
        <el-table-column key={column.prop} attrs={column} width={column.width}>
          {column.children &&
            column.children.length > 0 &&
            this.renderTableChildHeader(column.children)}
        </el-table-column>
      );
    },
    renderTableChildHeader(childList) {
      return childList.map((item) => {
        return this.renderTableHeader(item);
      });
    },
    renderCustomOption(column) {
      const scopedSlotsList = Object.keys(this.$scopedSlots);
      return scopedSlotsList.includes(column.prop + "-head")
        ? this.renderCustomInfo(column)
        : this.renderCustomColumn(column);
    },
    renderCustomInfo(column) {
      const prop = column.prop;
      const scopedSlotsList = Object.keys(this.$scopedSlots);
      const header = (scoped) => {
        return this.$scopedSlots[prop + "-head"]({
          index: scoped.$index,
          column: scoped.column,
        });
      };
      const scopedSlots = scopedSlotsList.includes(prop)
        ? {
            header,
            default: (scoped) => {
              return this.$scopedSlots[prop](scoped);
            },
          }
        : {
            header,
          };
      return (
        <el-table-column attrs={column} scopedSlots={scopedSlots}>
          <el-table-column
            key={column.prop}
            attrs={column}
            width={column.width}
          >
            {column.children &&
              column.children.length > 0 &&
              this.renderTableChildHeader(column.children)}
          </el-table-column>
        </el-table-column>
      );
    },
    renderCustomColumn(column) {
      const prop = column.prop;
      return (
        <el-table-column
          attrs={column}
          scopedSlots={{
            default: (scoped) => {
              return this.$scopedSlots[prop](scoped);
            },
          }}
        ></el-table-column>
      );
    },
  },
};
</script>

<style lang="less" scoped>
.tooltip {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

</style>
<style>
.el-tooltip__popper {
  max-width: 200px !important;
  word-break: break-all;
}
</style>